<template>
    <div class="app-container home index">
      <el-row :gutter="20" style="margin-top: 5%;">
        <el-col :span="24" class="title">
         学业指导及智能选课平台
        </el-col>

        <el-col :span="6">
            <el-card class="box-card card">
                <div class="icon-container">
                    <div class="card-icon">
                        <i class="el-icon-s-opportunity"></i>
                    </div>
                </div>
                
                <div class="card-title">
                    <span>岗位能力课程知识图谱</span>
                </div>

                <div class="card-content">
                    利用大数据与知识图谱技术，构建覆盖了核心课程、关键能力指标及个性化学习路径的图谱。
                </div>
                
            </el-card>
        </el-col>
       
        <el-col :span="6">
            <el-card class="box-card card">
                <div class="icon-container">
                    <div class="card-icon">
                        <i class="el-icon-s-custom"></i>
                    </div>
                </div>
                
                <div class="card-title">
                    <span>多维全面学生画像</span>
                </div>

                <div class="card-content">
                    收集并分析学生的学习行为、成绩数据、课外活动等多维度信息，分阶段构建全面、精准的学生画像。
                </div>
                
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card card">
                <div class="icon-container">
                    <div class="card-icon">
                        <i class="el-icon-chat-dot-square"></i>
                    </div>
                </div>
                
                <div class="card-title">
                    <span>个性化规划AI助手</span>
                </div>

                <div class="card-content">
                    基于“文心一言”大模型，开发智能问答与聊天AI助手功能，精准解答课程疑问，提供个性化学习建议。
                </div>
                
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card card">
                <div class="icon-container">
                    <div class="card-icon">
                        <i class="el-icon-share"></i>
                    </div>
                </div>
                
                <div class="card-title">
                    <span>混合推荐智能选课</span>
                </div>

                <div class="card-content">
                    根据先修课能力达成情况、兴趣偏好、职涯规划等数据，采用“并行式混合推荐”算法，为学生提供选课推荐。
                </div>
                
            </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script src="../api/js/jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="../api/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  <script src="../api/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
  <script src="../api/js/popper.js" type="text/javascript" charset="utf-8"></script>
  <script>
  
  export default {
    name: "Index",
    data() {
      return {
        currentDate: new Date(),
      }
    },
    methods: {
    }
  };
  </script>
  
  <style scoped lang="scss">
    @import '../views/css/bootstrap.css';
    
    * {
        box-sizing: border-box;
    }
    
    body {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .index {
        background-image: url("../assets/images/index_v2_bg.jpg");
        background-size: cover; 
        height:100vh;
        overflow: hidden;
    }

    .title {
        width:100%;
        height:64px;
        line-height: 64px;
        font-size: 32px;
        text-align: center;
        margin-bottom: 64px;
    }

    .description {
        width:100%;
        font-size: 24px;
        text-align: center;
        color:gray;
    }

    .icon-container {
        width:100%;
        display:flex;
        justify-content: center;
    }

    .card {
        min-height: 300px;
    }

    .card-icon {
        color: white;
        width: 64px;
        height: 64px;
        line-height:64px;
        border-radius: 32px;
        background: #304156;
        text-align: center;
        font-size: 32px;
    }

    .card-title {
        width: 100%;
        height: 48px;
        line-height:48px;
        font-size: 20px;
        color:#304156;
        text-align: center;
        font-weight: bold;
    }

    .card-content {
        width: 100%;
        font-size: 16px;
        text-align: center;
    }
  </style>
  
  
  